body{
  font-size:16px;background-color: #F0F0F0;margin: 0
}
body,p {padding: 0;margin: 0;}
*{box-sizing: border-box}
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(25, 147, 147, 0.1);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(25, 147, 147, 0.2);
} 

.Chat{padding: 10px}
.chat-thread { 
  list-style: none;
  overflow-y: scroll;
  overflow-x: hidden;  
    padding: 0;  margin: 0;  height: 300px;
}

.chat-thread li {
  position: relative;
  clear: both;
  display: inline-block;
  padding: 12px 30px 12px 20px;
  margin: 0 0 35px 0;
  /*font: 16px/20px 'Noto Sans', sans-serif;*/
  border-radius: 3px;
  background-color: rgba(25, 147, 147, 0.2);
}

.chat-thread li:after {
  position: absolute;
  top: 5px;
  content: '';
  width: 0;
  height: 0;
  border-top: 10px solid rgba(25, 147, 147, 0.2);
}

.chat-thread li.my {
  animation: show-chat-odd 0.15s 1 ease-in;
  -moz-animation: show-chat-odd 0.15s 1 ease-in;
  -webkit-animation: show-chat-odd 0.15s 1 ease-in;
  float: right;
  margin-right: 60px; 
}
 
.chat-thread li.my:after {
  border-right: 15px solid transparent;
  right: -15px;
}

.chat-thread li.other { 
  float: left;
  margin-left: 60px; 
}
 
.chat-thread li.other:after {
  border-left: 15px solid transparent;
  left: -15px;
}
 

 